<template>
	<view>
		 <view class="">
			 
		
				<u-row gutter="16">
							<u-col span="6" v-for="itme in this.spxq.length!==0 ? this.spxq :[{},{},{},{}]">
				<navigator  class="splj" :url="`/pages/center/show?id=${itme.id}`">
					<u-image class="u-skeleton-rect" width="100%" height="300rpx" :src="itme.cover_url"></u-image>
					<view class="title u-line-1 u-skeleton-rect">
						{{itme.title ? itme.title : "标题"}}
					</view>
					<view class="u-flex u-row-between">
					<view class="jiage u-skeleton-rect">
						售价{{itme.price}}
					</view>	
					<view class="xiaoliang u-skeleton-rect">
						销量{{itme.sales}}
					</view>
					</view>
				</navigator>
				 
				 	</u-col>
				 	
				 </u-row>
			
			
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gwcsj:[],
				id:[],
				spxq:[]
				
			}
		},
		
	 async	onLoad() {
		this.getData()
		},
		
		methods:{
			async getData(){
				//先获取购物车列表数据
				
				const gwclb = await this.$u.api.gwclb()
				console.log(gwclb)
				this.gwcsj = gwclb
				
				//把购物车列表数据的商品id装进this.id里面 用于调用购物车商品数据
				for(let i=0;i<this.gwcsj.data.length;i++){
					this.id.push(this.gwcsj.data[i].goods_id)
					console.log(this.id)

					
				};
				for(  let i=0;i<this.id.length;i++){
					const res  =  await this.$u.api.xq(this.id[i])
					 this.spxq.push(res.goods)
					 console.log(this.spxq)
					 console.log(this.spxq.title)
				}
				
			
		}
	}}
</script>

<style lang="scss" scoped>
	
	.gwcys{
		display: flex;
		margin-top: 20rpx;
	}
	.spye{
		display: flex;
	}
	.spye image{
		width: 200rpx;
		height: 300rpx;
	}
	
	.biaoti{
		margin-top: 20rpx;
	}
	
	.jiage1{
		margin-top: 120rpx;
	}
	.xuanzhong{
		margin-top: 100rpx;
		margin-left: 30rpx;
	}
	
	.splj{
	 padding: 40rpx;
	 margin-top: 30rpx;
	 box-shadow: 0 12rpx 20rpx 0 rgba(0,0,0, .1);
	 .title{
		 margin:10rpx 0;
		 font-size: 32rpx;
		 width: 100%;
	 }
	 .jiage{
		 color: red;
	 }
	 .xiaoliang{
		 color: #888;
	 }
	}

</style>
